<template>
  <div class="project box-centent">
    <div class="nav-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
      </el-breadcrumb>

    </div>

    <div class="item">
      <div class="list">
        <el-image style="width: 260px; height: 204px; border-radius:8px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-image>
        <div class="content">
          <div class="title">
            <div>市工信委关于开展第二批省大数据创业创新孵化园培育申报工作的通知</div>

          </div>
          <div class="text">
            根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开展我市第二批省大数据创业创新孵化园培育申报工作，有关事项通知如下。根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开…
          </div>
          <div class="more">
            <el-button type="primary" @click="goMore">了解更多</el-button>
            <div class="time">2019-06-02</div>
          </div>
        </div>
      </div>
      <div class="list">
        <el-image style="width: 260px; height: 204px; border-radius:8px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-image>
        <div class="content">
          <div class="title">
            <div>市工信委关于开展第二批省大数据创业创新孵化园培育申报工作的通知</div>

          </div>
          <div class="text">
            根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开展我市第二批省大数据创业创新孵化园培育申报工作，有关事项通知如下。根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开…
          </div>
          <div class="more">
            <el-button type="primary" @click="goMore">了解更多</el-button>
            <div class="time">2019-06-02</div>
          </div>
        </div>
      </div>
      <div class="list">
        <el-image style="width: 260px; height: 204px; border-radius:8px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-image>
        <div class="content">
          <div class="title">
            <div>市工信委关于开展第二批省大数据创业创新孵化园培育申报工作的通知</div>

          </div>
          <div class="text">
            根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开展我市第二批省大数据创业创新孵化园培育申报工作，有关事项通知如下。根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开…
          </div>
          <div class="more">
            <el-button type="primary" @click="goMore">了解更多</el-button>
            <div class="time">2019-06-02</div>
          </div>
        </div>
      </div>
      <div class="list">
        <el-image style="width: 260px; height: 204px; border-radius:8px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-image>
        <div class="content">
          <div class="title">
            <div>市工信委关于开展第二批省大数据创业创新孵化园培育申报工作的通知</div>

          </div>
          <div class="text">
            根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开展我市第二批省大数据创业创新孵化园培育申报工作，有关事项通知如下。根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开…
          </div>
          <div class="more">
            <el-button type="primary" @click="goMore">了解更多</el-button>
            <div class="time">2019-06-02</div>
          </div>
        </div>
      </div>
      <div class="list">
        <el-image style="width: 260px; height: 204px; border-radius:8px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-image>
        <div class="content">
          <div class="title">
            <div>市工信委关于开展第二批省大数据创业创新孵化园培育申报工作的通知</div>

          </div>
          <div class="text">
            根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开展我市第二批省大数据创业创新孵化园培育申报工作，有关事项通知如下。根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开…
          </div>
          <div class="more">
            <el-button type="primary" @click="goMore">了解更多</el-button>
            <div class="time">2019-06-02</div>
          </div>
        </div>
      </div>
      <div class="list">
        <el-image style="width: 260px; height: 204px; border-radius:8px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-image>
        <div class="content">
          <div class="title">
            <div>市工信委关于开展第二批省大数据创业创新孵化园培育申报工作的通知</div>

          </div>
          <div class="text">
            根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开展我市第二批省大数据创业创新孵化园培育申报工作，有关事项通知如下。根据《广东省经济和信息化委办公室关于开展第二批省大数据创业创新孵化园培育申报工作的通知》（粤经信办函〔2018〕249号）要求，现开…
          </div>
          <div class="more">
            <el-button type="primary" @click="goMore">了解更多</el-button>
            <div class="time">2019-06-02</div>
          </div>
        </div>
      </div>

    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="10" layout="prev, pager, next, total" :total="100" background pager-count="10" hide-on-single-page>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showMore: false,
      categories: [
        { name: '全部', type: 0, active: true },
        { name: '电商', type: 1, active: false },
        { name: '互联网', type: 2, active: false },
        { name: '农牧业', type: 3, active: false },
        { name: '金融', type: 4, active: false },
        { name: '新能源', type: 5, active: false },
        { name: '文化创意', type: 6, active: false },
        { name: '交通运输', type: 13, active: false },
        { name: '动漫电影', type: 7, active: false },
        { name: '动漫电影', type: 8, active: false },
        { name: '动漫电影', type: 9, active: false },
        { name: '动漫电影', type: 10, active: false },
        { name: '动漫电影', type: 11, active: false }
      ]
    }
  },
  methods: {
    changeCategories (category) {
      this.categories.forEach(item => {
        if (item.type === category.type) {
          item.active = true
        } else {
          item.active = false
        }
      })
    },
    goMore () {
      this.$router.push('/newDetails')
    }
  }
}
</script>

<style lang="scss" scoped>
.project {
  .nav-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 18px;
    /deep/.el-breadcrumb {
      flex: 1;
    }
  }

  .item {
    .list {
      display: flex;
      justify-content: center;
      padding: 28px 0;
      border-bottom: 1px solid #979797;
      .content {
        flex: 1;
        margin-left: 20px;
        .title {
          display: flex;
          align-items: center;
          font-weight: 900;
          font-size: 18px;
          color: rgba(19, 35, 64, 1);
          margin-bottom: 11px;
          .category {
            padding: 0px 12px;
            border-radius: 18px;
            border: 1px solid rgba(254, 82, 98, 1);
            font-size: 16px;
            color: rgba(254, 82, 98, 1);
            margin-left: 20px;
          }
        }
        .text {
          font-size: 16px;
          color: rgba(51, 69, 102, 1);
          line-height: 30px;

          width: 920px;
          min-width: 920px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .more {
          margin-top: 40px;
          display: flex;
          align-items: center;
          /deep/.el-button {
            padding: 8px 18px;
          }
          /deep/.el-button--primary {
            background: linear-gradient(
              135deg,
              rgba(91, 192, 251, 1) 0%,
              rgba(46, 141, 246, 1) 100%
            );
          }
          .time {
            flex: 1;
            text-align: right;
            font-size: 16px;
            color: rgba(130, 138, 153, 1);
          }
        }
      }
    }
  }
  /deep/.block {
    padding: 32px 0 48px;
    .el-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-pagination__total {
        float: right;
      }
    }
    .btn-prev,
    .btn-next {
      border-radius: 14px;
      background: rgba(148, 148, 148, 0.5);
      .el-icon {
        color: #606266;
      }
    }
    .number {
      border-radius: 14px;
      background: none;
    }
    .btn-next {
      border-radius: 14px;
      background: rgba(148, 148, 148, 0.5);
      .btn-next:disabled {
        color: #333;
      }
    }
  }
}
</style>
